<template>
  <div>
        <div class="personnel" :class="{'bgf': personList.length == 0}">
            <!-- 顶部 -->
            <!-- <div class="top">
                人员去向
            </div> -->

            <!-- 搜索栏 -->
            <div class="search-bar">
                <span class="text">搜索单位</span>
                <div class="input-box">
                    <input type="text" class="input" v-model="keyWords" placeholder="请输入单位名称" >
                    <span class="search-btn" @click="getOfficelList"></span>
                </div>
                <div class="select-box" @click="showPopup">
                    <span>查找单位</span>
                    <van-icon name="arrow-down"/>
                </div>
            </div>

            <!-- 轮播图 -->
            <div class="swiper-box" v-if="personList.length == 0 && officeList.length == 0">
                <swiper :options="swiperOption">
                    <swiper-slide v-for="(item,index) in swiperImages" :key="index"><img :src="item.url" width="100%"></swiper-slide>
                </swiper>
            </div>

            <!-- 标题（单位） -->
            <div class="office-box" v-if="personList.length !== 0 && officeList.length == 0">
                <span class="line"></span>
                <span class="office-text">{{selectDefault}}</span>
            </div>

            <!-- 人员列表 -->
            <div class="personnel-list" v-if="personList.length !== 0">
                <div class="personnel-list-item" v-for="(item,index) in personList" :key="index">
                    <div class="item-left">
                        <img class="avatar" :src="item.avatar">
                        <div class="personnel-info">
                            <span>姓&nbsp;&nbsp;&nbsp;名：{{item.nickname}}</span>
                            <span>职&nbsp;&nbsp;&nbsp;务：{{item.positionName}}</span>
                            <span>办公室：{{item.address || ''}}</span>
                        </div>
                    </div>
                    <div class="item-stata" :class="[item.status == 0?'item-stata-green':'item-stata-red']">{{item.stata}}</div>
                </div>
            </div>
            <!-- 单位列表 -->
            <div class="offic-list" v-if="personList.length == 0 && officeList.length !== 0">
                <div class="offic-list-item" v-for="(item,index) in officeList" :key="index" @click="getPersonnelList(item.id, item.name)">
                    <div class="item-left">
                        <div class="offic-info">
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 条件筛选 -->
        <van-popup v-model="popupShow" position="bottom" >
            <van-picker 
                :columns="columns" 
                show-toolbar
                @cancel="popupShow = false" 
                @confirm="onConfirm"
            />
        </van-popup>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    data() {
        return {
            swiperOption:{
                loop:true,
                autoplay:{
                    delay: 10000,
                }
            },
            LocationDistrict:"", 
            swiperImages:[
                {
                    url:'/static/images/zhengfeng1.png'
                },
                {
                    url:'/static/images/zhengfeng2.png'
                }
            ],
            selectDefault: '选择单位',
            popupShow: false, //底部弹出框
            personList:[],//人员列表
            officeList:[],//人员列表
            columns: [],//单位名称
            columnsId: [],//单位ID
            immediate: false,
            keyWords: '',//搜索关键词
        }
    },
    components: {
        swiper,
        swiperSlide
    },
    mounted(){
        this.getRegionlDataList();
    },
    methods:{
        //获取人员列表
        async getPersonnelList(deptID,name){
            let res = await this.$http.getPersonnelList(deptID)
            if(res.success && res.code == 200){
                if(!res.result || !res.result.elist){
                    this.personList = [];
                    this.$toast({
                        message: '该单位暂无人员数据',
                        forbidClick: true
                    })
                    return
                }
                let list = res.result.elist || [];
                list.forEach((item,index)=>{
                    if(!item.avatar){
                        item.avatar = '/static/images/user.png'
                    }
                    switch (item.status) {
                        case "0":
                            item.stata = "在 岗";
                            break;
                        case "1":
                            item.stata = "开 会";
                            break;
                        case "2":
                            item.stata = "外 出";
                            break;
                        case "3":
                            item.stata = "请 假";
                            break;
                        case "4":
                            item.stata = "暂 离";
                            break;
                        case "5":
                            item.stata = "待 班";
                            break;
                        case "6":
                            item.stata = "休 息";
                            break;
                        case "7":
                            item.stata = "下 班";
                            break;
                        case "9":
                            item.stata = "培 训";
                            break;
                        default:
                            item.stata = "无状态";
                    } 
                })
                this.personList = list;
                this.officeList = [];
                this.selectDefault = name;
            }else{
            }
        },
        //根据关键词获取列表
        async getOfficelList(){
            let paramas = {
                deptName: this.keyWords
            }
            if(this.keyWords.length == 0){
                this.$toast({
                    message: '请输入单位名称',
                    forbidClick: true
                })
                return
            }
            let res = await this.$http.getOfficelList(paramas)
            if(res.success && res.code == 200){
                let list = res.result;
                if(list.length == 0){
                    this.keyWords = ''
                    this.$toast({
                        message: '暂无该单位信息',
                        forbidClick: true
                    })
                    return
                }
                this.officeList = list;
                this.personList = [];
            }else{
            }
        },
        //根据条件获取区域数据
        async getRegionlDataList(district){
            let paramas = {
                regionName: ''
            }
            let res = await this.$http.getRegionlDataList(paramas)
            if(res.success && res.code == 200){
                let arr = [];
                let arrId = [];
                res.result.forEach((item,index)=>{
                    arr.push(item.name);
                    arrId.push(item.id);
                })
                this.columns = arr;
                this.columnsId = arrId;
            }else{
            }
        },
        //弹出层
        showPopup(){
            this.popupShow = true;
        },
        onConfirm(value, index) {
            this.getPersonnelList(this.columnsId[index], value)
            this.popupShow = false;
        },
        // 腾讯地图定位
        // getMyLocation() {
        //     var geolocation = new qq.maps.Geolocation("DTYBZ-MNUCV-HQOP3-UD5FF-BLBQT-ATFI2", "yunjulife");
        //     geolocation.getIpLocation(this.showPosition, this.showErr);
        // },
        // showPosition(position) {
        //     this.getRegionlDataList(position.district);
        // },
        // showErr() {
        //     this.getMyLocation();//定位失败再请求定位，测试使用
        // },
    }
}
</script>

<style lang="less" scoped>
    .personnel{
        background-color: #f5f5f5;
        min-height: 100vh;
        overflow: hidden;
        .top{
            width: 100%;
            height: .86rem;
            line-height: .86rem;
            text-align: center;
            font-size: .32rem;
            color: #fff;
            background: radial-gradient(circle, #f3511e, #fc1b13);//圆形向外部渐变
            position: relative;
        }
        .search-bar{
            width: 100%;
            height: 1.07rem;
            background-color: #fff;
            padding: 0 .28rem 0 .28rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: #eeeeee 0px 4px 5px;
            .text{
                font-size: .24rem;
            }
            .input-box{
                max-width: 4.25rem;
                height: .6rem;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-left: .14rem;
                .input{
                    width: 3.16rem;
                    height: .49rem;
                    font-size: .28rem;
                    border: 1px solid #dddddd;
                    padding-left: .15rem;
                }
                .search-btn{
                    width: .73rem;
                    height: .57rem;
                    background-image: url(/static/images/icon_search_btn.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    position: relative;
                    left: .01rem;
                }
            }
            .select-box{
                font-size: .24rem;
                margin-left: .2rem;
                height: .3rem;
                display: flex;
                justify-content: center;
                align-items: center;
                &>span{
                    display: inline-block;
                    max-width: .96rem;
                    height: .3rem;
                    line-height: .3rem;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    text-align: center;
                    z-index:99
                }
            }
        }
        .swiper-box{
            width: 100%;
            background-color: #fff;
        }
        .office-box{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: .28rem;
            width: 6.94rem;
            height: 1rem;
            line-height: .84rem;
            margin: .2rem auto;
            background-color: #fff;
            padding: 0 .24rem;
            font-weight: 600;
            .line{
                background-color: #fc1b12;
                width: .08rem;
                height: .36rem;
                border-radius: .04rem;
                margin-right: .16rem;
            }
        }
        .personnel-list{
            height: 80vh;
            overflow: scroll;
            padding-bottom: .8rem;
            .personnel-list-item{
                width: 6.94rem;
                height: 1.5rem;
                border-radius: 3px;
                margin: 0 auto;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: .24rem;
                padding: 0 .3rem;
                box-shadow: #999 0px 5px 8px;
                .item-left{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .avatar{
                    width: 1.1rem;
                    height: 1.1rem;
                    border-radius: 50%;
                }
                .personnel-info{
                    font-size: .3rem;
                    display: flex;
                    flex-direction: column;
                    margin-left: .17rem;
                    span{
                        font-size:.3rem;
                        -webkit-transform:scale(0.8);
                        font-weight: 600;
                        margin-bottom: .06rem;
                    }
                }
                .item-stata{
                    width: 1.2rem;
                    height: .6rem;
                    line-height: .6rem;
                    text-align: center;
                    font-size: .28rem;
                    color: #fff;
                    border-radius: .06rem;
                    box-shadow: #333 0px 2px 4px;
                }
                .item-stata-red{
                    background-color: #e71f19;
                }
                .item-stata-green{
                    background-color: #068e5c;
                }
            }
            .personnel-list-item:nth-child(1){
                margin-top: .03rem;
            }
        }
        .offic-list{
            height: 80vh;
            overflow: scroll;
            padding-bottom: .8rem;
            .offic-list-item{
                width: 6.94rem;
                height: 1.15rem;
                margin: 0 auto;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: .24rem;
                padding: 0 .3rem;
                box-shadow: #bbb 0px 5px 8px;
                .item-left{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .offic-info{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        span{
                            font-size:.36rem;
                            -webkit-transform:scale(0.8);
                            font-weight: 600;
                        }
                    }
                }
            }
        }
    }
    .bgf{
        background-color: #fff !important;
    }
</style>
